Freelance Web Dev

The Idea

After showing my portfolio website to my dad, he hit me up with a paid web dev freelancing job. The job includes one portfolio website or my dad and three websites for his art organizations: splendorbeauty.art, hkartgear.com, and blessasia.art.

The Learning Process

These few websites were not hard to make. However, one important difference that stood out from these websites is that instead of having only preformatted elements similar to this portfolio website, these four freelance websites get data from a database. The data is then converted into HTML elements that are appended into the HTML code, which requires a bit more back-end Javascript code.

The nature of the websites I was tasked to make requires a method for the client to submit to the website some pictures and text to showcase their art and exhibitions. Because of this, a static website would not work as data must be sent to a database and received to update the website. This calls for some handy javascript code.

Javascript is like a mixture of Java and Dart as they both have similar syntax. Javascript also has many applications to it and I had the opportunity to understand this language more. I learned a lot about the require( ) function. It is very similar to the import statement in Python and many other programming languages. First I had to install the packages that I wanted until I see that it is the dependencies in the package.json file, then I can require that package to make a 'const' out of it. An example of this would be: However, this is not defined on the client-side. Some workarounds would be to use the require( ) function in Firebase cloud functions or utilizing an npm package called Browserify (since this is a third-party API, Firebase requires you to be on a paid plan).

The npm packages that I used are nodemailer and dotenv. Nodemailer helped in sending an email via the input in the contact form and dotenv made it easier to hide the login details of my email.

I believe that the most useful thing I learned here is understanding what collections, documents, fields are in Firebase. It makes it a lot easier to understand how firebase works because Firebase is something I have to use often if I want to host my own websites or anything that requires a database.

Looking back, one thing I could have changed was to use a javascript library called ReactJS. ReactJS would significantly cut development time and make all the code easier to read and manage. Not only is it very popular, but I could also make beautiful UI components with it. However, it was too late because I used vanilla javascript for the main structure of all the websites.

The Challenges

The most challenging concept was Promises because it was entirely new to me. Promises are similar to try-catch functions. The then( ) method is used to, in a way, 'catch' the promised return of a function. This is because when working with databases, it takes time to retrieve data, meaning that the method will "promise" to return a value at some point in time. The try-catch aspect comes to play because errors can occur when fetching data from a database. Thus there must be some sort of error handling.

Promises work because of asynchronous operations. The word asynchronous (async) means that requests that require some time to finish will be called without following the main thread, which is a progression of events a website loops through. In a way, a separate thread is branched off, and when the extended branch is done, a callback will be performed.